<script setup>
import { ref, watch } from 'vue';
import hookIsVip from './customHook';
const props = defineProps({
  title: {type: String, required: true}
})
const renderTitle = `这里是 - ${props.title}`;
const userList = [
  {id: 1, name: 'lion-1'},
  {id: 2, name: 'lion-2'},
  {id: 3, name: 'lion-3'},
];
// 选中项索引
const selectIndex = ref(0);
// 选中的UID
const selectUid = ref(userList[selectIndex.value].id);
// UID的VIP状态
const vipStatus = hookIsVip(selectUid);
watch([selectIndex], (value) => {
  selectUid.value = userList[value].id
}, {
  immediate: true, // 初始化的时候也触发一次
  deep: false, // 监听对象的深度需要设置成true
});

console.log('###### RUN START ####');
</script>

<template>
  <div class="container">
    <div class="title">{{renderTitle}}</div>
    <select v-model="selectIndex">
      <option 
        v-for="(userInfo, index) in userList" 
        :key="index" :value="index"
      >
        {{ userInfo.name }}
      </option>
    </select>
    <p>
      {{userList[selectIndex].name}}
      {{vipStatus === 0 ? 
        '...请求中...' : 
        vipStatus === 1 ? '是vip' : '不是vip'}}
    </p>
  </div>
</template>

<style scoped>
.container{
    padding: 20px;
}

</style>

